<template>
    <div class="about">
        <div id="myCharts"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {},
  computed: {},
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.setEcharts()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    setEcharts () {
      // 初始化
      this.myChart = echarts.init(document.getElementById('myCharts'))
      this.myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    },
    resize () {
      // 屏幕尺寸改变重置echarts
      if (this.myChart) {
        this.myChart.resize()
      }
    }
  },
  beforeDestroy () {
    // 销毁实例
    echarts.dispose(this.myChart)
    this.myChart = null
  },
  watch: {
    option (val, oldVal) {
      console.log(val, oldVal)
      this.myChart.setOption(val)
    }
  }
}
</script>
<style lang="scss" scoped>
.about {
    width: 100vw;
    height: 70vh;
    #myCharts{
        width: 50%;
        height: 200px;
    }
}
</style>
